<template>
  <el-card>
    <el-form :inline="true" ref="searchFormRef">
      <el-form-item label="标题">
        <el-input
          v-model="searchForm.title"
          maxlength="256"
          :clearable="true"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="onSearch">查询</el-button>
        <el-button icon="RefreshRight" @click="onReset(searchFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="Plus" @click="isAddDialogVisible = true">新增</el-button>
    <el-table :data="announcementData" :border="true" :stripe="true" class="table-data">
      <el-table-column type="index" label="序号" width="180" />
      <el-table-column prop="title" label="标题" />
      <el-table-column label="发布类型">
        <template #default="scope">
          {{ scope.row.publishType === PublishType.Immediately ? '立即发送' : '延迟发送' }}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="发布时间">
        <template #default="scope">
          {{ publishTime(scope.row.publishTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            @click="onUpdate(scope.row.id)"
            size="small"
            icon="Edit"
            title="修改"
            style="margin-left: 12px"
            >修改</el-button
          >
          <!-- <el-button type="default" size="small" icon="View" title="查看" @click="onDetail(scope.row.id)">查看</el-button> -->
          <el-popconfirm
            :title="`你确定删除${scope.row.title}?`"
            @confirm="onRemove(scope.row.id)"
            width="200px"
          >
            <template #reference>
              <el-button type="danger" size="small" icon="Delete" title="删除">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 20, 50]"
      :background="true"
      layout="prev, pager, next, jumper, -> , sizes, total"
      :total="total"
      @current-change="getAnnouncementListAsync"
      @size-change="onSizeChange"
    />
  </el-card>
  <Show :visible="isAddDialogVisible">
    <AnnouncementAdd
      v-model="isAddDialogVisible"
      @update:refresh="onRefresh"
      title="添加公告"
      max-height="500px"
    />
  </Show>
  <Show :visible="isUpdateDialogVisible">
    <AnnouncementUpdate
      v-model="isUpdateDialogVisible"
      @update:refresh="onRefresh"
      title="修改公告"
      :id="updateId"
      max-height="500px"
    ></AnnouncementUpdate>
  </Show>
  <Show :visible="isDetailDialogVisible">
    <AnnouncementDetail
      v-model="isDetailDialogVisible"
      :id="detailId"
      title="查看公告"
      max-height="500px"
    >
    </AnnouncementDetail>
  </Show>
</template>

<script lang="ts" setup>
import { Show } from '@/components/show/index';
import { AnnouncementAdd } from './add/index';
import { AnnouncementUpdate } from './update/index';
import { AnnouncementDetail } from './detail/index';
import { ref, onMounted, computed } from 'vue';
import { deleteAsync, getListAsync } from '@/utils/api/announcement/index';
import { dayjs, type FormInstance } from 'element-plus';
import {
  PublishType,
  type AnnouncementGetListInputDto,
  type AnnouncementListDto
} from '@/utils/api/announcement/type';
import type { PagedResultDto } from '@/utils/api/type';

// 查询条件参数
const defaultPageSize = 10;
const searchFormRef = ref<FormInstance>();
const searchForm = ref<AnnouncementGetListInputDto>({
  skipCount: 0,
  maxResultCount: defaultPageSize
});
// 列表数据
let announcementData = ref<AnnouncementListDto[]>([]);
// 发布时间
const publishTime = computed(() => (value: string) => {
  return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
});
// 分页器默认页码
let pageNo = ref<number>(1);
// 每一页展示几条数据
let pageSize = ref<number>(defaultPageSize);
// 存储已有总个数
let total = ref<number>(0);

// 是否显示add dialogVisible
let isAddDialogVisible = ref(false);

// 是否显示updte dialogVisible
let isUpdateDialogVisible = ref(false);
let updateId = ref<string>();

// 是否显示detail dialogVisible
let isDetailDialogVisible = ref(false);
let detailId = ref<string>();

// 详情
const onDetail = (id: string) => {
  isDetailDialogVisible.value = true;
  detailId.value = id;
};

// 修改
const onUpdate = (id: string) => {
  isUpdateDialogVisible.value = true;
  updateId.value = id;
};

// 删除
const onRemove = async (id: string) => {
  await deleteAsync(id);
  // 删除成功刷新页面
  await onRefresh();
};

// 刷新
const onRefresh = async () => {
  await getAnnouncementListAsync();
};

//分页器下拉菜单发生变化触发
const onSizeChange = async (pageSizes: number) => {
  pageSize.value = pageSizes;
  await getAnnouncementListAsync();
};

// 组件挂载完成
onMounted(async () => {
  await getAnnouncementListAsync();
});

// 查询
const onSearch = async () => {
  await getAnnouncementListAsync();
};

// 重置
const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  formEl.resetFields();
};

// 查询列表
const getAnnouncementListAsync = async (pager = 1) => {
  pageNo.value = pager;
  searchForm.value.maxResultCount = pageSize.value;
  searchForm.value.skipCount = (pageNo.value - 1) * pageSize.value;
  let result: PagedResultDto<AnnouncementListDto> = await getListAsync(searchForm.value);
  total.value = result.totalCount;
  announcementData.value = result.items;
};
</script>
<style scoped lang="scss">
.table-data {
  width: 100%;
  margin: 20px 0;
}
</style>
